class Enlarge {
    constructor(el, options = {}) {
        this.el = document.querySelector(el)
        this.img = this.el.querySelector('.img')
        this.mask = this.el.querySelector('.mask')
        this.enlarge = this.el.querySelector('.enlarge')
        this.init()
    }
    init() {
        this.overOut()
        this.enlargeSetWH()
        this.maskMove()
    }

    maskMove() {
        this.img.onmousemove = (evt) => {
            let e = evt || window.event
            let left = e.pageX - this.el.offsetLeft - this.mask.offsetWidth / 2
            let top = e.pageY - this.el.offsetTop - this.mask.offsetHeight / 2
            if (left < 0) left = 0
            if (top < 0) top = 0
            let maxLeft = this.img.offsetWidth - this.mask.offsetWidth
            let maxtop = this.img.offsetHeight - this.mask.offsetHeight
            if (left > maxLeft) left = maxLeft
            if (top > maxtop) top = maxtop
            this.mask.style.left = left + 'px'
            this.mask.style.top = top + 'px'

            this.Enlargesetbg(left, top)
        }
    }
    Enlargesetbg(left, top) {
        let maskW = this.mask.offsetWidth
        let enlargeW = parseInt(this.enlarge.style.width)
        let data = enlargeW / maskW
        this.enlarge.style.backgroundPosition = `-${left * data}px -${top * data}px`
    }

    getstyle(tagObj, cssAttr) {
        if (window.getComputedStyle) {
            return getComputedStyle(tagObj)[cssAttr]
        } else {
            return tagObj.currentstyle[cssAttr]
        }
    }

    enlargeSetWH() {
        let maskW = parseInt(this.getstyle(this.mask, 'width'))
        let maskH = parseInt(this.getstyle(this.mask, 'height'))
        let temp = this.getstyle(this.enlarge, 'background-size')
        let enlargeBgW = parseInt(temp.split(' ')[0])
        let enlargeBgH = parseInt(temp.split(' ')[1])

        let imgW = this.img.clientWidth
        let imgH = this.img.clientHeight
        let w = maskW * (enlargeBgW / imgW)
        let h = maskH * (enlargeBgH / imgH)

        console.log(temp.split(''), maskW, enlargeBgW, imgW)

        this.enlarge.style.width = w + 'px'
        this.enlarge.style.height = h + 'px'


    }
    overOut() {
        this.img.onmouseover = () => this.mask.style.display = this.enlarge.style.display = 'block'
        this.img.onmouseout = () => this.mask.style.display = this.enlarge.style.display = 'none'

    }
}
export default Enlarge